<template>
  <div class="home">
            <van-tabs color="#43240c">
                <div class="cate">
                  <van-tab
                  v-for="category in categories"
                  :key="category.id"
                  :title="category.name"
                  >
                  </van-tab>
                </div>
            </van-tabs>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" width="375" height="150">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.imageUrl" width="100%" height="100%"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
     <div class="grid">
      <div
        v-for="grid in grids"
        :key="grid.id"
        class="grid-item">
        <div class="icon">
          <img :src="grid.imageUrl" alt="">
          <div class="badge">{{grid.text}}</div>
        </div>
        <div class="text">{{grid.title}}</div>
      </div>
    </div>
    <!-- 爆款商品 -->
     <div class="baokuan">
      <div class="baokuan-title"></div>
      <div class="baokuan-body">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我是有底线滴"
          @load= "onLoad"
        >
      <van-card
        v-for="prod in list"
        :key="prod.id"
        :thumb="prod.image"
        @click = "jumpToDetail(prod.id)"
      >
      <template v-slot:title>
              <div class="van-ellipsis">{{ prod.title }}</div>
      </template>
       <template #desc>
              <div class="ranking-tag">
                <img src="" alt="">
                {{ prod.dataoke.rankingTag }}
              </div>
              <div class="hot-ranking">全天热卖NO.{{ prod.dataoke.dailyRanking }}</div>
            </template>
            <template #tags>
              <span class="price">券后￥<em>{{ prod.price | money }}</em></span>
              <span class="origin-price">￥{{ prod.originPrice | money }}</span>
            </template>
            <template #price>
              <van-tag plain type="danger">{{ prod.couponValue }}</van-tag>
            </template>
            <template #num>
              <span>月销量 {{ prod.dataoke.monthSales | saleNum }}</span>
            </template>
          </van-card>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanners, getItems, getHomeData } from '@/api/home'
import { getCategories } from '@/api/category'
export default {
  name: 'Home',
  data() {
    return {
      banners: [], // 轮播图
      categories: [], // 分类
      grids: [], // 宫格数据
      list: [], // 爆款商品列表
      loading: false, // 是否正在加载列表数据
      finished: false, // 是否列表数据全部加载
      nextIndex: 0, // 列表下一页数据起始索引
    }
  },
  created() {
    getBanners()
      .then(data => {
        this.banners = data
      })
    getCategories()
      .then(data => {
        this.categories = data.list
      })
    getHomeData()
      .then(data => {
        this.grids = data.grids
      })
  },
  methods: {
    onLoad() {
      getItems(this.nextIndex)
        .then(data => {
          this.list.push(...data.list)
          this.loading = false
          this.nextIndex = data.nextIndex
          this.finished = data.isEnd
        })
    },
    // 实现到商品详情页面加载
    jumpToDetail(id) {
      this.$router.push('/detail?id=' + id)
    },
  },
}
</script>

<style lang="less" scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .grid{
    display: flex;
    font-size: 12px;
    margin: 12px 0;
    &-item{
      flex: 1;
      padding: 6px;
      flex-direction: column;
      align-items: center;

      img{
        width: 70%;
      }
      .icon {
        text-align: center;
        position: relative;
      }
      .badge{
        position: absolute;
        top: 4px;
        right: 4px;
        background: #fa1711;
        color: #fff;
        border-radius: 8px;
        padding: 0 4px;
      }
      .text{
        margin-left: 18px;
        font-size: 12px;
        transform: scale(.8);
      }
    }
  }
    .baokuan {
    position: relative;

    &-title {
      height: 160px;
      background-image: url(../../assets/baokuan-title.png);
      background-size: 100% 100%;
    }

    &-body {
      position: absolute;
      top: 90px;
      width: 100%;

      .ranking-tag {
        position: relative;
        width: fit-content;
        padding: 0 24px;
        margin-top: 16px;
        background: linear-gradient(92deg,#ff5201,#fa8c16);
        border-radius: 24px;
        color: #fff;
        img {
          position: absolute;
          width: 24px;
          top: -16px;
          left: 12px;
        }
      }
      .hot-ranking {
        color: #faad14;
      }
      .price {
        color: #fa1711;
        em {
          font-size: 18px;
          font-weight: 700;
          font-style: normal;
        }
      }
      .origin-price {
        margin-left: 12px;
        color: #ccc;
        text-decoration: line-through;
      }
    }
  }
</style>
